<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
    <script src="vue.js"></script>
    <script src="zquery.js"></script>
</head>
<body>
    <div id="app">
        <h1>Gamebar小组件设置</h1>
        <h2>预设</h2>
        <ul>
           <li v-for="(item,i) in preloadList" :key="i">
            TDP(W): 
            <input type="number" v-model="item.tdp" max="30" min="4">
            GPU(MHz):
            <input type="number" v-model="item.gpu" max="2600" min="200" step="50">
            &nbsp;
            <button @click="remove(i)">删除</button>
            <button @click="moveup(i)" v-if="i > 0">上移</button>
           </li>
           <button @click="add">添加</button>
        </ul>
        * 保存之后在小组件上右键刷新生效
        <button @click="save">保存</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                preloadList:[],
            },
            methods:{
                save(){
                    localStorage.setItem("predefine",JSON.stringify(this.preloadList));
                    window.alert("保存成功");
                },
                remove(i){
                    if(window.confirm("是否删除此项目?")){
                        this.preloadList.splice(i,1);
                    }
                },
                moveup(j){
                    const i = j;
                    var upperone = this.preloadList[i-1];
                    var currentone = this.preloadList[i];
                    this.preloadList[i-1] = currentone ;
                    this.preloadList[i] = upperone;
                    this.$forceUpdate();
                },
                add(){
                    this.preloadList.push({tdp:28,gpu:1800});
                }
            },
            mounted() {
                if(localStorage.getItem("predefine") == null){
                    var predefined = [
                        {tdp:30,gpu:1850},
                        {tdp:22,gpu:1600},
                        {tdp:15,gpu:1200},
                        {tdp:6,gpu:400}
                    ];
                    localStorage.setItem("predefine",JSON.stringify(predefined));
                    this.preloadList = predefined;
                }
                else{
                    this.preloadList = JSON.parse(localStorage.getItem("predefine"));
                }
                
            },
        });
    </script>
</body>
</html>